<template>
  <view class="list">
    <view class="item">
      <view class="item-hd">
        <view class="title">资质信息</view>
      </view>

      <view class="item-bd">
        <view class="des">
          <view class="label">发票类型</view>
          <view class="con">
            <u-radio-group v-model="form.type">
              <u-radio
                :name="1"
                v-if="types.includes(1)"
                shape="circle"
                active-color="#F60313"
                >增值税普通发票</u-radio
              >
              <u-radio
                :name="2"
                v-if="types.includes(2)"
                shape="circle"
                active-color="#F60313"
                >增值税专用发票</u-radio
              >
            </u-radio-group>
          </view>
        </view>

        <view class="des">
          <view class="label">单位名称</view>
          <view class="con">
            <input
              v-model="form.title"
              type="text"
              :placeholder-style="placeholderStyle"
              placeholder="请输入单位名称"
              @blur="searchInvoiceNo"
            />
          </view>
        </view>

        <view class="des">
          <view class="label">纳税人识别号</view>
          <view class="con">
            <input
              v-model="form.code"
              type="text"
              :placeholder-style="placeholderStyle"
              placeholder="请输入纳税人识别号"
            />
          </view>
        </view>

        <template v-if="form.type == 2">
          <view class="des">
            <view class="label">注册地址</view>
            <view class="con">
              <input
                v-model="form.ext.address"
                type="text"
                :placeholder-style="placeholderStyle"
                placeholder="请输入注册地址"
              />
            </view>
          </view>
          <view class="des">
            <view class="label">注册电话</view>
            <view class="con">
              <input
                v-model="form.ext.mobile"
                type="tel"
                :placeholder-style="placeholderStyle"
                placeholder="请输入注册电话"
              />
            </view>
          </view>
          <view class="des">
            <view class="label">开户银行</view>
            <view class="con">
              <input
                v-model="form.ext.bank"
                type="text"
                :placeholder-style="placeholderStyle"
                placeholder="请输入开户银行"
              />
            </view>
          </view>
          <view class="des">
            <view class="label">银行账户</view>
            <view class="con">
              <input
                v-model="form.ext.bank_card"
                type="tel"
                :placeholder-style="placeholderStyle"
                placeholder="请输入银行账户"
              />
            </view>
          </view>

          <view class="des">
            <view class="label">收票人邮箱</view>
            <view class="con">
              <input
                v-model="form.email"
                type="email"
                :placeholder-style="placeholderStyle"
                placeholder="请输入收票人邮箱"
              />
            </view>
          </view>
        </template>
      </view>
    </view>

    <view class="item">
      <view class="item-bd">
        <view class="des">
          <view class="label">发票内容</view>
          <view class="con">
            <u-radio-group v-model="form.desc_type">
              <u-radio :name="1" shape="circle" active-color="#F60313"
                >商品明细</u-radio
              >
              <u-radio :name="2" shape="circle" active-color="#F60313"
                >商品类别</u-radio
              >
            </u-radio-group>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { invoiceConf, save, config, searchInvoiceNo } from "@/api/invoice";
import { regEmail } from "@/common/regExp";

export default {
  data() {
    return {
      placeholderStyle: "color:#8C8C8C;font-size:28rpx;",
      form: {
        id: "",
        has_apply: 0,
        type: 1,
        title: "",
        code: "",
        email: "",
        desc_type: 1,
        ext: {
          address: "",
          mobile: "",
          bank: "",
          bank_card: ""
        }
      },
      types: [1, 2],
      appcode: ""
    };
  },

  methods: {
    async init() {
      let res = await invoiceConf();
      if (!res.code) {
        let { types } = res.data.invoiceConf.conf;
        this.types = types;
        if (types.length == 1) {
          this.form.type = types[0];
        }
        if (res.data.invoiceConf.conf.appcode)
          this.appcode = res.data.invoiceConf.conf.appcode;
      }

      let infores = await config();
      if (!infores.code && infores.data.length) {
        let item = infores.data[0];

        item.ext = JSON.parse(item.ext);

        this.form = item;
      }
    },
    async submit() {
      let { form } = this;
      if (form.title == "") return this.$utils.toast("请填写单位名称");

      if (form.code == "") return this.$utils.toast("请填写纳税人识别号");

      if (form.type == 2) {
        if (form.ext.address == "") return this.$utils.toast("请填写注册地址");
        if (form.ext.mobile == "") return this.$utils.toast("请填写注册电话");
        if (form.ext.bank == "") return this.$utils.toast("请填写开户银行");
        if (form.ext.bank_card == "")
          return this.$utils.toast("请填写银行账户");

        if (form.email == "") return this.$utils.toast("请填写收票人邮箱");
        if (!regEmail(form.email)) return this.$utils.toast("邮箱格式不正确");
      }

      const res = await save(form, true);
      let msg = res.msg;
      if (!res.code) {
        msg = "修改成功";
      }

      this.$utils.toast(msg);
    },

    async searchInvoiceNo() {
      if (!this.appcode) return;
      const res = await searchInvoiceNo({
        keyword: this.form.title
      });

      if (res.result) {
        let { address, code, mobile } = res.result;
        if (code) this.form.code = code;
        if (address) this.form.ext.address = address;
        if (mobile) this.form.ext.mobile = mobile;
      }
    }
  },

  created() {
    this.init();
  }
};
</script>

<style lang="scss" scoped>
.list {
  padding: 24rpx;
}

.item {
  background: #fff;
  border-radius: 20rpx;
  padding: 0 24rpx;
  margin-bottom: 24rpx;
}

.item-hd {
  display: flex;
  align-items: center;
  padding: 24rpx 0;
  border-bottom: 2rpx solid #f8f8f8;
  .title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 30rpx;
    color: #262626;
    font-weight: bold;
  }
}

.item-bd {
  .des {
    display: flex;
    align-items: center;
    padding: 24rpx 0;
    font-size: 28rpx;
    border-bottom: 2rpx solid #f8f8f8;

    &:last-of-type {
      border-bottom: 0;
    }
  }

  .label {
    width: 200rpx;
    margin-right: 20rpx;
    color: #8c8c8c;
  }

  .con {
    flex: 1;
    overflow: hidden;
    color: #262626;

    input {
      flex: 1;
      overflow: hidden;
      font-size: 28rpx;
      color: #262626;
    }
  }
}
</style>
